﻿import React, { useState,useEffect } from "react";
import PropTypes from 'prop-types';
import data from "./data.json";
import "./style.css";
import HealthLine from "../component/component/Numeric/index"

const HealthTwo = (props) => {
  const [boyFlag,setBoyFlag]=useState(false);
  const [grilFlag,setGrilFlag]=useState(false);
  return <div className="headthtwo" style={{ height: "95%", width: "90%", boxSizing: "border-box", marginTop: "4%", marginLeft: "10%" }}>
    <div className="types">
      <div className={!boyFlag?"":"active"} onClick={()=>{setBoyFlag(!boyFlag)}}>
          <div className="boy"></div>
          <b>男生</b>
      </div>
      <div className={!grilFlag?"":"active"} onClick={()=>{setGrilFlag(!grilFlag)}}>
          <div className="girl"></div>
          <b>女生</b>
      </div>
    </div>
    <HealthLine data={data} boyFlag={boyFlag} grilFlag={grilFlag}></HealthLine>
  </div>
}
HealthTwo.propTypes = {

}
HealthTwo.defaultProps = {
}


export default HealthTwo;


